<template>
  <div class="footer-box">
    <div class="footer-container">
      <div class="footer-service clearfix">
        <div class="footer-service-item footer-icon-001">
          <i></i>
          <span>专注于房地产领域</span>
        </div>
        <div class="footer-service-item footer-icon-002">
          <i></i>
          <span>资深房地产客服专家</span>
        </div>
        <div class="footer-service-item footer-icon-003">
          <i></i>
          <span>一对一专属服务</span>
        </div>
        <div class="footer-service-item footer-icon-004">
          <i></i>
          <span>用户诚意推荐</span>
        </div>
      </div>
      <div class="footer-line"></div>
      <div class="footer-links clearfix">
        <dl class="footer-article-item">
          <dt>买房工具</dt>
          <dd>
            <a href="#">房天下问答</a> | <a href="#">房贷计算器</a>
          </dd>
          <dd>
            <a href="#">地图找房</a> | <a href="#">公积金贷款</a>
          </dd>
          <dd>
            <a href="#">购房百科</a> | <a href="#">税费计算器</a>
          </dd>
        </dl>
        <dl class="footer-article-item">
          <dt>租房</dt>
          <dd>
            <a href="#">整租房源</a> | <a href="#">个人房源</a>
          </dd>
          <dd>
            <a href="#">我要出租</a> | <a href="#">500元合租</a>
          </dd>
        </dl>
        <dl class="footer-article-item">
          <dt>装修</dt>
          <dd>
            <a href="#">建材店铺</a> | <a href="#">装修公司</a>
          </dd>
          <dd>
            <a href="#">设计师</a> | <a href="#">装修案列</a>
          </dd>
          <dd>
            <a href="#">在线报备</a> | <a href="#">免费设计</a>
          </dd>
          <dd>
            <a href="#">家居美图</a>
          </dd>
        </dl>
        <dl class="footer-article-item">
          <dt>3房网</dt>
          <dd>
            <a href="#">土地转让</a> | <a href="#">土地招排挂</a>
          </dd>
          <dd>
            <a href="#">商铺租售</a> | <a href="#">写字楼租售</a>
          </dd>
          <dd>
            <a href="#">地产指数</a> | <a href="#">中国指数研究院</a>
          </dd>
          <dd>
            <a href="#">商业百科</a> | <a href="#">物业服务</a>
          </dd>
        </dl>
        <dl class="footer-contact-item">
          <h3>联系我们</h3>
          <p>400-010-xxx</p>
          <div class="footer-ewm">
            <img src="../../assets/vm.png" alt="">
            <p>关注微信订阅号</p>
          </div>
        </dl>
      </div>
      <div class="footer-friend">
        <ul class="footer-friend-title-list clearfix">
          <li>
            <a href="#">关于我们</a>|
          </li>
          <li>
            <a href="#">About Fang.com</a>|
          </li>
          <li>
            <a href="#">合作网站</a>|
          </li>
          <li>
            <a href="#">联系我们</a>|
          </li>
          <li>
            <a href="#">招聘信息</a>|
          </li>
          <li>
            <a href="#">房天下家族</a>|
          </li>
          <li>
            <a href="#">网站地图</a>|
          </li>
          <li>
            <a href="#">iphone客户端</a>|
          </li>
          <li>
            <a href="#">Android客户端</a>|
          </li>
          <li>
            <a href="#">开放平台</a>|
          </li>
          <li>
            <a href="#">服务声明</a>|
          </li>
          <li>
            <a href="#">加盟房天下</a>
          </li>

        </ul>
      </div>
      <div class="footer-copyright">
        <p>Copyright © 2020 北京搜房科技发展有限公司 Beijing SouFun Science&Technology Development Co.,Ltd 版权所有</p>
        <p>
          天津市南开二纬路xxxx号劝业场&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#">
            <img src="../../assets/icon-footer.png" alt="">**网安备 0008899999xxxx号
          </a>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped="scoped">
  html,
  body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: "Myriad Set Pro", "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
  }

  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  a {
    text-decoration: none;
    color: #000;
  }

  img {
    border: 0;
  }

  body {
    background: #fff;
    color: #666;
  }

  html,
  body,
  div,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  button,
  fieldset,
  form,
  input,
  legend,
  textarea,
  th,
  td {
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
    color: #08acee;
  }

  button {
    outline: 0;
  }

  img {
    border: 0;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
  }

  li {
    list-style: none;
  }

  a {
    color: #666;
  }

  a:hover {
    color: #eee;
  }

  .clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
  }

  .clearfix {}

  /* 必要布局样式css */
  .footer-box {
    background: #222132;
    overflow: hidden;
    width: 100%;
    color: #888;
    padding: 30px 0 35px;
  }

  .footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
  }

  .footer-service {
    margin-right: -26px;
    margin-bottom: 38px;
    padding-left: 69px;
  }

  .footer-service-item {
    float: left;
    height: 60px;
    width: 240px;
    margin-right: 26px;
  }

  .footer-service-item i {
    width: 50px;
    height: 45px;
    float: left;
    margin: 17px 17px 0 29px;
    opacity: .8;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    transform: scale(.6);
  }

  .footer-service-item span {
    font-size: 16px;
    color: #ccc;
    float: left;
    margin-top: 29px;
  }

  .footer-icon-001 i {
    background: url(../../assets/icon-footer01.png) no-repeat center center;
    background-size: contain;
  }

  .footer-icon-002 i {
    background: url(../../assets/icon-footer02.png) no-repeat center center;
    background-size: contain;
  }

  .footer-icon-003 i {
    background: url(../../assets/icon-footer03.png) no-repeat center center;
    background-size: contain;
  }

  .footer-icon-004 i {
    background: url(../../assets/icon-footer04.png) no-repeat center center;
    background-size: contain;
  }

  .footer-line {
    height: 0;
    display: block;
    clear: both;
    border-bottom: 1px solid #393854;
  }

  .footer-links {
    padding-top: 40px;
    padding-left: 69px;
  }

  .footer-article-item {
    width: 209px;
    height: 226px;
    float: left;
    margin-right: 23px;
    line-height: 2;
    font-size: 14px;
  }

  .footer-article-item dt {
    color: #ccc;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 2;
    font-weight: 300;
  }

  .footer-article-item dd {
    line-height: 2;
  }

  .footer-article-item dd a {
    color: #888;
    transition: all .1s;
  }

  .footer-article-item dd a:hover {
    color: #fff;
  }

  .footer-contact-item {
    width: 145px;
    float: left;
  }

  .footer-contact-item h3 {
    font-size: 16px;
    color: #ccc;
    line-height: 2;
    margin-bottom: 10px;
    font-weight: 400;
  }

  .footer-contact-item p {
    font-size: 22px;
    color: #fff;
    font-family: Arial, "Microsoft Yahei", "HanHei SC", PingHei, "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    margin-bottom: 15px;
  }

  .footer-ewm {
    float: left;
    width: 110px;
    margin-right: 18px;
    text-align: center;
  }

  .footer-ewm img {
    width: 110px;
    height: 110px;
    display: block;
    border: none;
  }

  .footer-ewm p {
    font-size: 14px;
    color: #ccc;
    margin-top: 12px;
  }

  .footer-friend {
    width: 1050px;
    height: 20px;
    line-height: 20px;
    margin: 30px auto;
  }

  .footer-friend-title {
    float: left;
    color: #ccc;
    font-size: 14px;
  }

  .footer-friend-title-list {
    float: left;
  }

  .footer-friend-title-list li {
    float: left;
  }

  .footer-friend-title-list li a {
    color: #888;
    transition: all .1s;
    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
  }

  .footer-friend-title-list li a:hover {
    color: #fff;
  }

  .footer-friend-more {
    color: #ccc;
    transition: all .1s;
    float: left;
    font-size: 14px;
  }

  .footer-copyright {
    line-height: 20px;
    font-size: 14px;
    text-align: center;
  }

  .footer-copyright p {
    margin-bottom: 9px;
    font-size: 14px;
    color: #888;
  }
</style>
